<template>
  <el-card class="box-card">
    <div class="nav-top">
      <span style="font-size:12px;color:pink"
        >说明: 目前支持学科关键字条件筛选</span
      >
      <el-button
        style="float: right;padding:10px ;font-size:12px"
        size=" mini"
        icon="el-icon-edit"
        type="success"
        @click="$router.push('new')"
        >新增试题</el-button
      >
    </div>
    <!-- from表单下拉选择框 -->
    <el-form :model="simpleFrom" ref="simpleFrom" label-width="80px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select
              v-model="simpleFrom.subjectID"
              placeholder="请选择"
              @change="onSelectSubjectChange"
            >
              <el-option
                v-for="subject in subjectList"
                :key="subject.value"
                :label="subject.label"
                :value="subject.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录" prop="catalogID">
            <el-select v-model="simpleFrom.catalogID" placeholder="请选择">
              <el-option
                v-for="item in directiorysList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select v-model="simpleFrom.tags" placeholder="请选择">
              <el-option
                v-for="tags in tagsList"
                :key="tags.value"
                :label="tags.label"
                :value="tags.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input
              v-model="simpleFrom.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="simpleFrom.questionType" placeholder="请选择">
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="simpleFrom.difficulty" placeholder="请选择">
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select v-model="simpleFrom.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in direction"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select
              v-model="simpleFrom.creatorID"
              placeholder="根据题干搜索"
            >
              <el-option
                v-for="item in creatorList"
                :key="item.id"
                :label="item.username"
                :value="item.username"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="simpleFrom.remarks" placeholder="请选择">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="simpleFrom.shortName" placeholder="请选择">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市" prop="province">
            <el-row type="flex" justify="space-between">
              <el-col :span="12">
                <el-select
                  @change="handleProvince"
                  v-model="simpleFrom.province"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in citySelect.province"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="11">
                <el-select v-model="simpleFrom.city" placeholder="请选择">
                  <el-option
                    v-for="item in citySelect.cityData"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="text-align:right">
          <el-button size="small" @click.stop="onRsetFrom">清除</el-button>
          <el-button size="small" type="primary" @click="onSearch"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <div>
      <!-- 统计数据区域 -->
      <div class="count-num">
        <i class="el-icon-info"></i>&nbsp;
        <span>数据一共{{ counts }}条</span>
      </div>
      <!-- table表格区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="试题编号" width="120px">
          <template slot-scope="scope">
            <div>{{ scope.row.number }}</div>
          </template>
        </el-table-column>
        <el-table-column label="学科" width="105.6px">
          <template slot-scope="scope">
            <div>{{ scope.row.subject }}</div>
          </template>
        </el-table-column>
        <el-table-column label="目录" width="102.6px">
          <template slot-scope="scope">
            <div>{{ scope.row.catalog }}</div>
          </template>
        </el-table-column>
        <el-table-column label="题型" width="102.6px">
          <template slot-scope="scope">
            <div v-if="scope.row.questionType == 1">单选</div>
            <div v-else>多选</div>
          </template>
        </el-table-column>
        <el-table-column label="题干" width="280px">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="180px">
          <template slot-scope="scope">
            <div>{{ scope.row.addDate | parseTimeByString }}</div>
          </template>
        </el-table-column>
        <el-table-column label="难度" width="102px">
          <template slot-scope="scope">
            <div v-if="scope.row.difficulty == 1">简单</div>
            <div v-else>困难</div>
          </template>
        </el-table-column>
        <el-table-column label="录入人" width="102px">
          <template slot-scope="scope">
            <div>{{ scope.row.creator }}</div>
          </template>
        </el-table-column>
        <!-- 按钮区域 -->
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button
              class="el-button--primary"
              icon="el-icon-view"
              circle
              size="small"
              plain
              @click="openPreviewDialog(scope.row)"
            ></el-button>
            <el-button
              class="el-button--success"
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              size="small"
              @click="
                $router.push({ path: 'new', query: { id: scope.row.id } })
              "
            ></el-button>
            <el-button
              class="el-button--danger"
              type="success"
              icon="el-icon-delete"
              circle
              size="small"
              plain
              @click="ondeleteSubject(scope.row.id)"
            ></el-button>
            <el-button
              class="el-button--warning"
              type="info"
              icon="el-icon-check"
              circle
              size="small"
              plain
              @click="onAdd(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页列表区域 -->
    <el-pagination
      class="pageStyle"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2, 5, 20, 50]"
      :page-size="5"
      layout=" prev, pager, next, sizes,jumper"
      :total="counts"
    >
    </el-pagination>

    <!-- 试题预览区 -->
    <questions-preview
      ref="questionPreview"
      :data="questionInfo"
    ></questions-preview>
  </el-card>
</template>

<script>
import { simple } from '@/api/hmmm/subjects'
import { simple as simpleDirectiorys } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { simple as simpleUsers } from '@/api/base/users'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import questionsPreview from '../components/questions-preview'

export default {
  name: 'questionsVue',
  data() {
    return {
      value: '',
      simpleFrom: {
        page: 1, // 分页
        pagesize: 5, // 分页条数
        subjectID: null, //  学科
        catalogID: null, // 二级目录
        tags: null, //  标签
        keyWord: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 所有城市
        city: null // 城市下面的地址
      },
      subjectList: [], // 学科列表
      directiorysList: [], // 二级数据列表
      tagsList: [], // 标签列表
      questionType: questionType, // 试题类型
      difficulty: difficulty, // 难度
      direction: direction, // 方向
      creatorList: [], // 录入人列表
      citySelect: {
        province: [], // 获取到所有的省
        cityData: [] // 根据省获取到市
      },
      tableData: [],
      // 分页数据
      counts: null, // 分页总条数
      currentPage: 1, // 当前页数
      showDialog: false,
      questionInfo: {},
      choiceState: 1 // 添加精选成功
    }
  },
  components: {
    questionsPreview
  },
  created() {
    this.getsubjectList() // 获取学科列表
    this.getCreatorList() // 录入人方法
    this.getCityData() // 获取所有的省
    this.getTabelList() // 获取tableList列表
  },

  methods: {
    // 请求简单subject列表数据
    async getsubjectList() {
      const { data } = await simple()
      this.subjectList = data
    },
    // 请求二级列表和标签 学科标签下拉框发生改变
    async onSelectSubjectChange(subjectID) {
      const { data: res1 } = await simpleDirectiorys({
        subjectID
      })
      this.directiorysList = res1
      const { data: res2 } = await tagsSimple({
        subjectID
      })
      this.tagsList = res2
      // 下拉框发生改变  就清除二级和标签的vulue
      this.simpleFrom.catalogID = ''
      this.simpleFrom.tags = ''
    },
    // 录入人请求
    async getCreatorList() {
      const { data: res3 } = await simpleUsers()
      this.creatorList = res3
    },
    // 获取省
    getCityData: function() {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function(e) {
      this.citySelect.cityData = citys(e)
      this.simpleFrom.city = ''
    },
    // 获取data列表
    async getTabelList() {
      console.log(this.simpleFrom, 888)
      const { data: res4 } = await list(this.simpleFrom)
      this.tableData = res4.items
      this.counts = res4.counts
    },
    // 清除表单
    onRsetFrom() {
      console.log(888)
      this.$refs.simpleFrom.resetFields()
      this.handleProvince() // 清除下面的城市
      this.getTabelList()
    },

    // 分页功能
    handleSizeChange(val) {
      this.simpleFrom.pagesize = val
      this.getTabelList()
    },
    handleCurrentChange(val) {
      this.simpleFrom.page = val
      this.getTabelList()
    },
    // 搜索功能
    async onSearch() {
      this.getTabelList()
    },
    openPreviewDialog(questionInfo) {
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionPreview.open()
      })
    },
    // 删除题目
    ondeleteSubject(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await remove({ id })
          if (res) {
            this.$message.success('删除成功')

            // TODO:  解决BUG:最后页码的最后一页，只剩一条数据时，点击删除后：页码会-1，但是对应的用户信息 还是停留在上一页为空的状态，并且删除后页码-1，也必须在页码总数大于1的情况，不然就为0页了，最少也是一页
            if (
              document.querySelectorAll('.el-table__body tbody tr').length === 1
            ) {
              this.simpleFrom.page =
                this.simpleFrom.page > 1 ? this.simpleFrom.page - 1 : 1
            }
            this.getTabelList()
            return
          }
          this.$message.error('删除失败')
        })
        .catch()
    },
    // 精选题库加入
    onAdd(id) {
      this.$confirm('此操作将该题目加入精选, 是否添加?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await choiceAdd({
            id,
            choiceState: this.choiceState
          })
          if (res) {
            this.$message.success('添加成功')
            this.getTabelList()
          } else {
            this.$message.error('添加失败')
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin: 10px 8px;
  .nav-top {
    margin-bottom: 30px;
  }
  .el-select {
    width: 100%;
  }
  .count-num {
    font-size: 13px;
    color: #909399;
    height: 35px;
    line-height: 35px;
    margin-bottom: 15px;
    padding-left: 15px;
    background-color: #f4f4f5;
  }
  // button按钮样式
  .el-table {
    .el-button--primary {
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
    }
    .el-button--success {
      color: #67c23a;
      background: #f0f9eb;
      border-color: #c2e7b0;
    }
    .el-button--danger {
      color: #f56c6c;
      background: #fef0f0;
      border-color: #fbc4c4;
    }
    .el-button--warning {
      color: #e6a23c;
      background: #fdf6ec;
      border-color: #f5dab1;
    }
  }
  .pageStyle {
    margin: 20px 5px;
    float: right;
  }
}
</style>
